<template>
  <div class="page-container-padding">
    <!-- 查询 -->
    <div>
      <el-input
        v-model.trim="queryKeyword"
        size="mini"
        placeholder="输入方案标题关键字进行查询"
        style="width: 300px; margin-right: 6px"
      ></el-input>
      <el-button type="primary" size="mini" @click="queryMyInvestment">
        查询
      </el-button>
    </div>
    <!-- 列表 -->
    <div class="plan-container">
      <el-row :gutter="16" justify="space-between">
        <el-col
          v-for="(item, index) in planList"
          :key="index"
          :xs="24"
          :lg="12"
        >
          <div class="plan-box">
            <div>
              <div
                v-if="item.audit_flag === 0"
                style="color: #ff5300; margin-bottom: 5px"
              >
                [无效]
              </div>
              <div style="font-size: 16px">
                <span style="width: 80px; display: inline-block">
                  方案标题：
                </span>
                <span class="plan-title">
                  <a target="_blank" :href="fileStorage + item.filepath">
                    {{ item.title }}
                  </a>
                </span>
                <span class="plan-actions">
                  <el-button
                    type="text"
                    size="mini"
                    class="ac-del"
                    @click="toDeletePlan(item, index)"
                  >
                    删除
                  </el-button>
                </span>
              </div>
              <br />
              <div>
                <span style="width: 70px; display: inline-block">
                  有效日期：
                </span>
                <span style="width: 180px; display: inline-block">
                  {{ item.active_date }} ~ {{ item.expire_date }}
                </span>
              </div>
              <br />
              <div class="plan-examine">
                <span style="width: 70px; display: inline-block">
                  评级情况：
                </span>
                <span
                  v-show="item.examine_level > 0"
                  style="display: inline-block"
                >
                  {{ item.level_explain }}({{ item.level_text }})
                </span>
              </div>
              <br />
              <div class="plan-examine">
                <span style="width: 70px; display: inline-block">
                  审批结果：
                </span>
                <span
                  v-show="item.examine_ret > 0"
                  style="display: inline-block"
                >
                  {{ item.ret_explain }}({{ item.ret_text }})
                </span>
              </div>
              <br />
              <div>
                <span style="width: 70px; display: inline-block">
                  方案类型：
                </span>
                <span style="width: 80px; display: inline-block">
                  {{ item.category }}
                </span>
              </div>
              <br />
              <div>
                <span
                  style="cursor: pointer; color: #0066ff; user-select: none"
                  @click="toShowRecord(index)"
                >
                  模拟跟踪记录
                  <i
                    :class="
                      item.showDetail
                        ? 'el-icon-caret-bottom'
                        : 'el-icon-caret-right'
                    "
                  ></i>
                </span>
                <span class="plan-time">发布于: {{ item.create_time }}</span>
              </div>
            </div>
            <!-- 记录操作 -->
            <div v-show="item.showDetail" class="record-box">
              <div style="margin-bottom: 6px">
                计划结果(
                <span style="color: #ff6700; font-weight: 700">
                  全部平仓结束后再填
                </span>
                )
                <el-input
                  v-model="item.plan_profit"
                  size="mini"
                  placeholder="在此填写方案的结果"
                  style="width: 200px; margin: 0 6px"
                ></el-input>
                <el-button
                  type="warning"
                  size="mini"
                  @click="toSavePlanProfit(item)"
                >
                  确认保存
                </el-button>
              </div>
              <div>
                <el-input
                  v-model.trim="followText"
                  placeholder="在此填写实盘或模拟跟踪记录"
                  size="mini"
                  type="textarea"
                  style="max-width: 410px; margin-right: 8px"
                ></el-input>
                <el-button
                  type="primary"
                  size="mini"
                  @click="toSavePlanRecord(index)"
                >
                  保存
                </el-button>
              </div>
              <div v-loading="item.followTextLoading">
                <div style="margin: 10px 0; color: #f34700; font-size: 18px">
                  跟踪记录：
                </div>
                <div
                  v-for="(ft, i) in item.followList"
                  :key="'ft' + i"
                  style="margin-top: 10px"
                >
                  <div>
                    <span style="color: #0066ff; margin-right: 10px">
                      {{ ft.active_time }}
                    </span>
                  </div>
                  <div style="line-height: 24px; text-indent: 2em">
                    {{ ft.description }}
                  </div>
                </div>
                <div>
                  <el-button
                    icon="el-icon-caret-top"
                    type="text"
                    @click="item.showDetail = false"
                  >
                    收起记录
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :current-page="page"
        :page-size="pageSize"
        :total="totalCount"
        @current-change="paginatorPageChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
  import { fileStorage } from '@/config'
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import {
    getMyInvestment,
    saveInvestmentFollow,
    getInvestmentFollow,
    putInvestPlan,
    deleteMyInvestPlan,
  } from '@/api/departmentWork/investment'
  export default {
    data() {
      return {
        fileStorage: fileStorage,
        page: 1,
        pageSize: 20,
        totalCount: 0,
        queryKeyword: '',
        planList: [],
        currentShowIndex: -1,
        followText: '',
      }
    },
    mounted() {
      this.queryMyInvestment()
    },
    methods: {
      // 删除方案
      toDeletePlan(plan, index) {
        this.$baseConfirm(
          `确定删除【${plan.title}】这个投资方案吗?`,
          '确定删除',
          () => {
            deleteMyInvestPlan({ plan_id: plan.id }).then((res) => {
              console.log(res)
              if (res.code === 200) {
                this.$baseMessage(res.msg, 'success')
                this.planList.splice(index, 1)
              } else {
                this.$baseMessage(res.msg, 'error')
              }
            })
          }
        )
      },
      paginatorPageChange(page) {
        this.page = page
        this.queryMyInvestment()
      },
      queryMyInvestment() {
        const params = {
          page: this.page,
          page_size: this.pageSize,
          kw: this.queryKeyword,
        }
        getMyInvestment(params).then((res) => {
          const data = res.data
          this.planList = data.records.map((p) => {
            p.showDetail = false
            p.followTextLoading = false
            return p
          })
          this.page = data.cur_page
          this.totalCount = data.total_count
        })
      },
      // 显示方案的记录
      toShowRecord(index, keep) {
        this.currentShowIndex = index
        // 获取当前数据的跟踪记录
        const planItem = this.planList[index]
        if (keep) {
          planItem.showDetail = true
        } else {
          planItem.showDetail = !planItem.showDetail
        }
        planItem.followTextLoading = true
        getInvestmentFollow({ plan_id: planItem.id })
          .then((res) => {
            planItem.followList = res.data.records
            planItem.followTextLoading = false
          })
          .catch((err) => {
            planItem.followTextLoading = false
          })
      },

      // 保存新的方案记录
      toSavePlanRecord(index) {
        const planItem = this.planList[index]
        const params = { plan_id: planItem.id }
        const data = {
          active_date: datetimeToStr(new Date(), false, '-'),
          description: this.followText,
        }
        saveInvestmentFollow(data, params).then((res) => {
          this.$baseMessage(res.msg, 'success')
          this.followText = ''
          // 刷新当前条目的跟踪记录
          this.toShowRecord(index, true)
        })
      },

      // 保存方案结果
      toSavePlanProfit(plan) {
        const putData = {
          plan_profit: plan.plan_profit,
        }
        putInvestPlan(putData, plan.id).then((res) => {
          this.$baseMessage(res.msg, res.code === 200 ? 'success' : 'error')
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .plan-container {
    margin: 10px 0;
    .plan-box {
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      .plan-title {
        color: #0077cc;
        font-weight: 700;
        text-decoration: underline;
      }
      .plan-examine {
        background-color: #f0f2f5;
        padding: 3px 0;
        line-height: 20px;
      }
      .plan-actions {
        float: right;
        .ac-del {
          color: #fc5531;
          opacity: 0;
        }
      }
      .plan-time {
        color: #888;
        font-size: 10px;
        float: right;
      }
      &:hover {
        .ac-del {
          opacity: 1;
        }
      }
    }
    .record-box {
      border-top: 1px dashed #222;
      margin-top: 10px;
      padding-top: 10px;
    }
  }
  .list-label {
    width: 150px;
    display: inline-block;
  }
  .msg-box {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: #c7efcf;
  }
</style>
